<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Google Font link-->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">


    <link rel="stylesheet" href="../css/slick/slick.css">
    <link rel="stylesheet" href="../css/slick/slick-theme.css">
    <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/magnific-popup.css">
    <link rel="stylesheet" href="../css/bootsnav.css">
    <link rel="stylesheet" href="../css/new.css">

    <!-- xsslider slider css -->
    <!--<link rel="stylesheet" hrIDIS_FRONTsets/css/xsslider.css">-->

    <!--For Plugins external css-->
    <!--<link rel="stylesheet" hrIDIS_FRONTsets/css/plugins.css" />-->

    <!--Theme custom css -->
    <link rel="stylesheet" href="../css/style.css">
    <!--<link rel="stylesheet" hrIDIS_FRONTsets/css/colors/maron.css">-->

    <!--Theme Responsive css-->
    <link rel="stylesheet" href="../css/responsive.css" />

    <script src="../js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body data-spy="scroll" data-target=".navbar-collapse">


<div class="culmn">
    <!--Home page style-->


    <nav class="navbar navbar-default bootsnav navbar-fixed">


        <!-- Start Top Search -->
        <div class="top-search">
            <div class="container">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
                </div>
            </div>
        </div>
        <!-- End Top Search -->


        <div class="container">
            <div class="attr-nav">
                <ul>
                    <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
                </ul>
            </div>

            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#brand">
                    <img src="../images/logo.png" class="logo" alt="">
                    <!--<img sIDIS_FRONTsets/images/footer-logo.png" class="logo logo-scrolled" alt="">-->
                </a>

            </div>
            <!-- End Header Navigation -->

            <!-- navbar menu -->
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index">首页</a></li>
                    <li><a href="abstract">工作室简介</a></li>
                    <li><a href="works">工作室作品</a></li>
                    <li><a href="teacher">指导老师介绍</a></li>
                    <li><a href="member">成员介绍</a></li>
                    <li><a href="contact">联系我们</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>

    </nav>


    <!--列表排布开始-->
<div class="container-fluid">
    <div class="container idis-works-all">
        <div class="col-lg-8 col-lg-offset-2">
            <div class="idis-works">
                <p>实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字</p>
            </div>

            <div class="row idis-from">
                <form>
                    <div class="form-group form-inline form-style">
                        <div class="form-group ">
                            <input id="search" type="text" class="form-control" placeholder="搜索" data-toggle="tooltip" data-placement="top" title="搜索作品">
                            <button id="btn-search" type="reset" class="btn btn-primary" >搜索</button>
                        </div>
                        <select id="select-type" class="form-control" data-toggle="tooltip" data-placement="top" title="筛选作品类别" onchange="select()">
                            <option value=-1>请选择类别</option>
                            <option value=1>项目类别一</option>
                            <option value=2>项目类别二</option>
                            <option value=3>项目类别三</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-lg-8 col-lg-offset-2" id="content">
            <!--<div class="idis-works" >
                <h5>作品类别一</h5><hr/>
                <h3>作品名字</h3>
                <img src="../images/test.jpg" class="img-responsive">
                <div>
                    <p>作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介</p>
                </div>

            </div>-->
        </div>
        <div class="col-lg-8 col-lg-offset-2" id="content2">

        </div>

</div>
</div>
<!--列表排布结束-->

</div>
    <!--底部-->
    <footer>
        <div class="main_footer fix bg-mega text-center p-top-40 p-bottom-30 m-top-80">
            <div class="col-md-12">
                <p class="wow fadeInRight" data-wow-duration="1s"> SCAU Copyright © 2018 SCAU IDIS All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="../js/vendor/jquery-1.11.2.min.js"></script>
    <script src="../js/vendor/bootstrap.min.js"></script>
    <!--script src="IDIS_FRONT/js/owl.carousel.min.js"></script-->
    <script src="../js/jquery.magnific-popup.js"></script>
    <script src="../js/jquery.easing.1.3.js"></script>
    <script src="../css/slick/slick.js"></script>
    <script src="../css/slick/slick.min.js"></script>
    <script src="../js/jquery.collapse.js"></script>
    <script src="../js/bootsnav.js"></script>
    <script src="../js/plugins.js"></script>
    <script src="../js/main.js"></script>
    <script>
    $(document).ready(function(){
        $.ajax({                                                                           //加载ajax；
            type: "GET",
            url: "/show/allwork" ,
            dataType: "json",                                                              //请求路径，这里的路径是一个json文件；
            success: function(data) {                                                     //当请求成功时执行的回调函数；
                //这个是例子
                $.each(data.allWork, function(i, item) {
                	//alert(item.name);
                    $("#content").append(                                                  //把遍历到的内容追击到id为content的div中；
                        '<div class="idis-works" >'+
                            '<h5>' + item.type + '</h5><hr/>'+
                            '<h3>' + item.name + '</h3>'+                                  //遍历出来json里边的内容；i，表示当前遍历到第几条内容；item，表示当前遍历的对象；
                            '<img src="'+ item.picture+ '" class="img-responsive">'+
                            '<div>'+ '<p>'+item.content+'</p></div>'+
                         '</div>')         
                });
            }
        });

        $('#btn-search').click( function () {
            var sousuo = $("#search").val();
            if (sousuo == "") {
                alert("请输入信息");
                return false;
            }else {
                var url = "/show/findworkbyname/"+sousuo;
                $.ajax({
                    type: "GET",
                    url: url ,
                    dataType: "json",                                                              //请求路径，这里的路径是一个json文件；
                    success: function(data) {                         //当请求成功时执行的回调函数；
                        $('#content2').empty();
                        document.getElementById("content").style.display="none";//隐藏
                        $.each(data.workWithName, function(i, item) {
                                 $("#content2").append(                                                  //把遍历到的内容追击到id为content的div中；
                                     '<div class="idis-works" >'+
                                     '<h5>' + item.type + '</h5><hr/>'+
                                     '<h3>' + item.name + '</h3>'+                                  //遍历出来json里边的内容；i，表示当前遍历到第几条内容；item，表示当前遍历的对象；
                                     '<img src="'+ item.picture+ '" class="img-responsive">'+
                                     '<div>'+ '<p>'+item.content+'</p></div>'+
                                     '</div>')
                             });

                    }
                });
            }
        });
        $('#select-type').change(function(){
        var val=$("#select-type").val();//获取select选中的值
        $.ajax({
            url:'/show/allworkbytype/'+val,//后台请求url，传入值
            type:'GET',//使用get请求，如果用post，值写在data里
            cache:true,//缓存
            dataType:'json',//返回的数据类型，就是后台返回回来的类型，可以是html，或xml
            async:true,//使用异步方式
            success:function(data){//成功后返回值data
                // alert(data["workWithType"][0].name+",隐藏初始信息");                                                     //当请求成功时执行的回调函数；
                document.getElementById("content").style.display="none";//隐藏
                $('#content2').empty();
                $.each(data.workWithType, function(i, item) {
                    //alert(item.name);
                    $("#content2").append(                                                  //把遍历到的内容追击到id为content的div中；
                        '<div class="idis-works" >'+
                        '<h5>' + item.type + '</h5><hr/>'+
                        '<h3>' + item.name + '</h3>'+                                  //遍历出来json里边的内容；i，表示当前遍历到第几条内容；item，表示当前遍历的对象；
                        '<img src="'+ item.picture+ '" class="img-responsive">'+
                        '<div>'+ '<p>'+item.content+'</p></div>'+
                        '</div>')
                });
            },
            error:function(){//失败的处理
                alert("发生错误：" + jqXHR.status);
            }
            });
        });

    });
</script>
</body>
</html>